<template>
   <div class="flex justify-end mt">
        <el-pagination background layout="sizes, prev, pager, next" 
          :total="total" 
          v-model:page-size="currentPageSize"
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
      </div>
</template>

<script>
export default {
    props: {
        page: Number,
        pageSize: Number,
        total: Number
    },
    emits: ['update:page', 'update:pageSize',],
    setup(props, {emit}) {

        // const pageSize = ref(props.pageSize)
        // const page = ref(props.page)

        // const total = ref(props.total)

        const { pageSize, page, total } = toRefs(props)

        const currentPageSize = pageSize.value
        const currentPage= page.value
      

        //debugger
        function handleSizeChange(val) {
            emit('update:pageSize', val)
        }

        function handleCurrentChange(val) {
            emit('update:page', val)
        }

        return {currentPageSize, currentPage, total,
            handleSizeChange, handleCurrentChange
        }
    }
}
</script>